<template>
  <div class="maintainHome">
    <x-header title="智能保养" :left-options="{backText:''}">
    </x-header>
    <div class="carMess">
      <img :src="cardMess.publicUrl+cardMess.LOGO"/>
      <div class="detailMess">
        <h1>{{cardMess.CARBRAND.split('_')[0]}}</h1>
        <p>{{cardMess.CARBRAND.split('_')[1]}} {{cardMess.CARBRAND.split('_')[2]}}</p>
      </div>
      <div class="mileage">
        <p>保养剩余数 <span>{{cardMess.MAINTENANCETIMES}}</span></p>
      </div>
    </div>
    <div class="mainCard">
      <h1>你的爱车有<em>{{jLength}}</em>项需要保养<span @click.stop='goDetail(maintainMess.FREETEST_URL,"免费检测")'>赠12项项目保养检测</span></h1>
      <div class="cardItem">
        <div class="selectItem" v-for='(item,index) in maintainMess.BASICS_DATA'>
          <div class="h2">
              <div class="ItemDetail" @click='selectJItem(item)'>
                <span :class='{checked:moreItem(item.array)}'></span><p>{{item.label}}</p>
                <em class="prodetail" v-if='item.label!="机油"'>
                 {{item.MT_DETAIL_NAME}}</em>
              </div>
              <div class="price" v-if='item.label!="机油"'>
                <s>￥{{item.array[0].ORIGINAL_PRICE}}</s>
                <span>免费</span>
              </div>
          </div>

          <div class="allDetail" v-if='item.label=="机油"'>
            <div class="itemDetail" :class='{checkItem:items.RECOMMEND==1}'  v-for='(items,indexI) in item.array'>
              <h3>{{items.MT_DETAIL_NAME}}</h3>
              <div class="itemsPrice">
                 <s>￥{{items.ORIGINAL_PRICE}}</s><span>免费</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <popup v-model='showModelV' width='100%' position='right' v-if='showModelV'>
      <x-header :title="titleVal" :left-options="{backText:'',preventGoBack:true}" @click.native='close'></x-header>
      <div v-html='showHtml'></div>
    </popup>
    <div class="illegalR">
        <div class="illegalTitle">
          <img src="../../assets/image/illegal/title.png" alt="">
        </div>
        <div class="illegalFlag">
          <div class="flag">
             <img src="../../assets/image/maintain/card1.png" alt="">
             <p>查询准确</p>
          </div>
          <div class="flag">
             <img src="../../assets/image/maintain/card2.png" alt="">
             <p>快速查询</p>
          </div>
          <div class="flag">
             <img src="../../assets/image/maintain/card3.png" alt="">
             <p>免费查询</p>
          </div>
          <div class="flag">
            <img src="../../assets/image/maintain/card4.png" alt="">
            <p>信息保密</p>
          </div>
        </div>
    </div>
    <footer>
     <div class="footer">
      <div class="prices">
        <div class="allPrice">
          <span>为你节省</span><em>{{workHourM.sum}}</em><span class="yuan">元(含0.0元工时费)</span>
        </div>
      </div>
      <div class="btns" @click='goSchedule'>
        分时优惠
      </div>
      </div>
    </footer>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader,Popup,XDialog,Divider,Confirm} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"maintainHome",
  // 数据
  data(){

    return{
      userId:'',
      cardMess:'' ,//车辆信息
      maintainMess:'', //所有的保养数据
      jLength:'',//基础保养数 
      oLength:'', //其他保养数
      otherMaintain:[],//其他保养数据数组
      workHourM:{maintainId:'',sum:0,disPrice:0,itemArray:[],baoArray:[]}, //选择商品后用到的参数分别 工时原价 工时折扣后 保养项目id 结算总价（未使用代金券） 抵代金券的价格  分时时要传的各个项目的参数
      showModelV:false,
      titleVal:'保养手册',//pop弹框的标题
      showHtml:'', //保养手册和详情显示的东西
      showDiaLog:false  //控制保养工时弹框
      }
  },
  // 计算属性
  computed:{
    
  },
  // 导航离开该组件的对应路由时调用
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.cardMess=JSON.parse(sessionStorage.getItem('cardMess'));
    this.getMaintainItem();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //根据车辆信息和城市来获取保养项目
    getMaintainItem(){
      let obj={};
      obj.USERCARD_ID=this.cardMess.ID;
      obj.CITY=sessionStorage.getItem('city');
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost('/cardWeb/getCardMTPackage.action',obj).then(res=>{
          this.$vux.loading.hide();
          if(res.STATUS_CODE==1){
            this.maintainMess=res;
            this.jLength=this.maintainMess.BASICS_DATA.length;
            this.oLength=this.maintainMess.OTHER_DATA.length;
            this.workHourMoney();
          }else if(res.STATUS_CODE==15){
            this.$vux.alert.show({
              title: '提示',
              content: res.RESULT_MSG
            })
          }
        },err=>{
          console.log(err);
        })
    },
    workHourMoney(){//计算工时费
      let obj={
        maintainId:'', //保养项目Id
        sum:0,    //所有项目的总价
        disPrice:0,//所有项目抵的优惠券价格
        itemArray:[], //分时要传的参数
        baoArray:[]  //保养数组
      };
      for(let i=0;i<this.maintainMess.BASICS_DATA.length;i++){
        for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
          if(this.maintainMess.BASICS_DATA[i].array[j].RECOMMEND==1){
            let objs={};//声明一个变量来存储每一个选择的项目
            obj.maintainId+=this.maintainMess.BASICS_DATA[i].array[j].MAINTAIN_DETAIL_ID+',';
            obj.sum+=Number(this.maintainMess.BASICS_DATA[i].array[j].ORIGINAL_PRICE);
            objs.mtDetailId=this.maintainMess.BASICS_DATA[i].array[j].MAINTAIN_DETAIL_ID;
            objs.mtDetailName=this.maintainMess.BASICS_DATA[i].array[j].MT_DETAIL_NAME;
            objs.mtServId=this.maintainMess.BASICS_DATA[i].array[j].SERV_DETAIL_ID;
            obj.baoArray.push(this.maintainMess.BASICS_DATA[i].array[j]);
            obj.itemArray.push(objs);//将每一个选择的项目压人数组
          }
        }
      }
      this.workHourM=obj;
    },
    //选择基础保养
    selectJItem(item){
      let flag=false;
      for(let i=0;i<item.array.length;i++){
        if(item.array[i].RECOMMEND==1){
          flag=true;
          break;
        }
      }
      for(let i=0;i<this.maintainMess.BASICS_DATA.length;i++){
        if(flag){
          for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
            this.$set(this.maintainMess.BASICS_DATA[i].array[j],'RECOMMEND',0);
          }
        }else{
          for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
            this.$set(this.maintainMess.BASICS_DATA[i].array[0],'RECOMMEND',1);
          }
        }
      }
      this.workHourMoney();
    },
    moreItem(arr){
      let flag=false;
      for(let i=0;i<arr.length;i++){
        if(arr[i].RECOMMEND==1){
          flag=true;
          break;
        }
      }
      return flag;
    },
    //去分时优惠
    goSchedule(){
      let obj={};
      if(this.workHourM.itemArray.length==0){
        this.$vux.alert.show({
          title: '提示',
          content: '请先选择保养项目'
        })
        return;
      }
      obj.CITY='深圳';
      obj.USERCARD_ID=String(this.cardMess.ID);
      obj.ITEM_ARRAY=this.workHourM.itemArray;
      //存储分时优惠时需要的数据
      sessionStorage.setItem('scheduleMess',JSON.stringify(obj));
      this.$router.push('/cardSchedule');
    },
    //去保养手册，保养详情，保养
    goDetail(html,name){
      this.showModelV=true;
      this.showHtml=html;
      this.titleVal=name;
    },
    close(){
      this.showModelV=false;
    },
    closeWork(){
      this.showDiaLog=false;
    }
  },
  // 子组件
  components:{
    XHeader,
    Popup,
    XDialog,
    Divider,
    Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.maintainHome{
  width: 7.5rem;
  background: #eeeded;
  text-align: left;
  padding-bottom: 0.2rem;
  min-height: 100%;
  .illegalR{
    .illegalTitle{
      margin: 1.2rem auto 0.4rem;
      img{
        width: 3.76rem;
        height: 0.3rem;
        margin: 0 auto;
        display: block;
      }
    }
    .illegalFlag{
      padding: 0 0.7rem;
      display: flex;
      justify-content: space-around;
      .flag{
        img{
          height: 0.86rem;
          width: 0.86rem;
          display: block;
          margin: 0 auto;
        }
        p{
          font-size: 0.2rem;
          color:#666;
          padding-top: 0.15rem;
        }
      }
    }
  }
  .dialog{
    .top{
      height: 1.2rem;
      background:transparent;
      margin-top: -1.2rem;
    }
    img{
      width: 1.74rem;
      height: 1.74rem;
      margin-top: -1.4rem;
    }
    .workMess{
      background: #fff;
      padding-bottom: 0.3rem;
    }
    .titles{
      font-size: 0.32rem;
      font-weight: bold;
      margin: 0 0.8rem;
      color:#141414;
      background: #fff;
    }
    .workDetail{
      background: #fff;
      .workItem{
        display: flex;
        padding: 0 0.3rem;
        height: 0.6rem;
        line-height: 0.6rem;
        span{
          width: 0.1rem;
          height: 0.1rem;
          margin-top: 0.25rem;
          border-radius: 0.1rem;
          background: #f31616;
        }
        h1{
          font-size: 0.28rem;
          color: #141414;
          width: 80%;
          text-align: left;
          padding-left: 0.1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        em{
          font-size: 0.28rem;
          font-style: normal;
          color: #f31616;
        }
      }
    }
    .close{
      background:transparent;
      margin-bottom: -1.2rem;
      img{
        height: 0.7rem;
        width: 0.7rem;
      }
    }
  }
  footer{
    position:fixed;
    bottom: 0;
    height: 0.9rem;
    line-height: 0.9rem;
    width: 100%;
    background: #2a2a2a;
    color: #fff;
    .footer{
      display: flex;
      width: 100%;
    }
    .btns{
      width: 27%;
      background: #e42e3b;
      font-size: 0.3rem;
      text-align: center;
    }
    .prices{
      width: 73%;
      overflow: hidden;
      .allPrice{
        float: left;
        line-height: 0.1rem;
        padding: 0 0.2rem 0 .3rem;
        margin: 0.15rem 0;
        height: 0.5rem;
        span{
          font-size: 0.25rem;
        }
        em{
          font-size: 0.4rem;
          font-style: normal;
          color: #e62937;
          padding: 0 0.05rem;
        }
        .yuan{
          padding-left: 0.05rem;
        }

      }
      .discount{
        float: left;
        line-height: 0.1rem;
        padding: 0 0.2rem 0 .15rem;
        margin: 0.2rem 0;
        height: 0.5rem;
        border-left: 1px solid #656567;
        span{
          font-size: 0.25rem;
        }
        em{
          font-size: 0.3rem;
          font-style: normal;
          color: #e62937;
        }
      }
      label{
        font-size: 0.2rem;
        color: #e62937;
      }
    }
  }
  .byText{
    color: #fff;
    font-size: 0.25rem;
  }
  .carMess{
    height: 1.1rem;
    padding: 0 0.15rem;  
    background:#e42e3b;
    display: flex;
    color: #fae0e1;
    img{
      width: 0.7rem;
      height: 0.7rem;
      margin:0.2rem 0.15rem;
      border-radius: 0.4rem;
    }
    .detailMess{
      width: 65%;
      padding-left: 0.1rem;
      font-weight: 600;
      h1{
        font-size: 0.28rem;
        padding: 0.2rem 0 0.05rem 0;
      }
      p{
        font-size: 0.22rem;
      }
    }
    .mileage{
      p{
        font-size: 0.22rem;
        color: #fff;
        line-height: 1.1rem;
        span{
          font-size: 0.3rem;
        }
      }
    }
  }
  .mainCard{
    width: 7.2rem;
    margin: 0.25rem auto;
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 5px 0px rgba(223,223,223,.4);
    h1{
      height: 0.7rem;
      font-size: 0.3rem;
      color: #000;
      line-height: 0.7rem;
      padding: 0 0.15rem;
      background: #fafbf2;
      border-top-right-radius: 0.1rem;
      border-top-left-radius: 0.1rem;
      font-weight: bold;
      em{
        color: #e42e3b;
        font-style: normal;
      }
      span{
        float: right;
        color: #373737;
        font-size: 0.25rem;
        font-weight:normal;
      }
    }
    .cardItem{
      .selectItem{
        padding: 0.1rem 0;
        .allDetail{
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
          height: 0.8rem;
          .itemDetail{
            min-width: 2.95rem;
            margin-left: 0.2rem;
            width: 95%;
            height: 0.8rem;
            display:flex;
            line-height: 0.8rem;
            background: url(../../assets/image/maintain/nselectY1.png) right bottom no-repeat;
            background-size: 0.33rem 0.34rem;
            border:1px solid #c0c0c0;
            border-radius: 0.1rem;
            position: relative;
            .itemsPrice{
              height: 0.8rem;
              display: flex;
              s{
                font-size: 0.23rem;
                color:#333;
                margin-top: 0.05rem;
                padding-right: 0.1rem;
              }
              span{
                font-size: 0.3rem;
                color:#f31616;
              }
            }
            h3{
              padding:0 0.15rem;
              font-size: 0.26rem;
              height: 0.8rem;
              overflow:hidden; 
              width: 78%;
              text-overflow:ellipsis;
              white-space: nowrap;
            } 
          }
          .checkItem{
            background:#ffeff0 url(../../assets/image/maintain/selectY1.png) right bottom no-repeat;
            background-size: 0.33rem 0.34rem;
            border:1px solid #e42e3b;
            .itemsPrice{
            }
          }
        }
        .selectY{
          height: 0.94rem;
          line-height: 0.94rem;
          margin-bottom: 0;
          span{
            margin-top: 0.3rem;
          }
        }
        .h2{
          font-size: 0.26rem;
          display: flex;
          color: #040404;
          line-height: 0.5rem;
          padding-left: 0.2rem;
          margin-bottom: 0rem;

          span{
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.1rem;
            float: none;
            background: url(../../assets/image/maintain/noChecked.png) no-repeat;
            background-size: 0.4rem 0.4rem;
          }
          p{
            margin-top: 0.1rem;
            font-weight: 550;
            padding-left: 0.1rem;
          }
          div{
            width: 60%;
            line-height: 0.4rem;
            float: right;
            display: flex;
          }
          em{
            color: #666;
            font-size: 0.24rem;
            font-style: normal;
            padding-left: 0.1rem;
            line-height: 0.6rem;
          }
          .price{
            display: flex;
            justify-content: flex-end;
            span{
              font-size: 0.3rem;
              color: #f31616;
              background: #fff;
              width: auto;
              padding-right: 0.2rem;
            }
            s{
              font-size: 0.22rem;
              color: #6e6e6e;
              line-height: 0.6rem;
              padding-right: 0.1rem;
            }
          }
        }
      }
    }
  }
  .checked{
    background: url(../../assets/image/maintain/checked.png) no-repeat!important;
        background-size: 0.4rem 0.4rem!important;
  }
}
</style>